<template>
  <div class="new-contact-page">
    <div class="topbar">
      <button class="back-btn" @click="goBack">←</button>
      <h1 class="title">New contact</h1>
    </div>

    <div class="form-card">
      <div class="avatar-upload">
        <div class="avatar-circle">
          <span class="avatar-text">{{ initials || '👤' }}</span>
        </div>
        <label class="upload-btn">
          <input type="file" accept="image/*" @change="onAvatarChange" hidden />
          Add an image
        </label>
      </div>

      <div class="form-grid">
        <div class="form-group">
          <label>First name</label>
          <input class="input" v-model="form.firstName" />
        </div>
        <div class="form-group">
          <label>Last name</label>
          <input class="input" v-model="form.lastName" />
        </div>
        <div class="form-group">
          <label>Company</label>
          <input class="input" v-model="form.company" />
        </div>
        <div class="form-group">
          <label>Job</label>
          <input class="input" v-model="form.job" />
        </div>
        <div class="form-group">
          <label>SIP address</label>
          <input class="input" v-model="form.sip" placeholder="1001@domain" />
        </div>
        <div class="form-group">
          <label>Phone</label>
          <input class="input" v-model="form.phone" />
        </div>
      </div>
    </div>

    <div class="footer-bar">
      <button class="secondary" @click="goBack">Cancel</button>
      <button class="primary" @click="save">Save</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewContactPage',
  data() {
    return {
      form: { id: '', firstName: '', lastName: '', company: '', job: '', sip: '', phone: '', avatar: '' },
    }
  },
  computed: {
    initials() {
      const a = (this.form.firstName || '').trim();
      const b = (this.form.lastName || '').trim();
      return (a || b) ? `${a.charAt(0)}${b.charAt(0)}`.toUpperCase() : '';
    }
  },
  methods: {
    onAvatarChange(e) {
      const file = e.target.files && e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = () => { this.form.avatar = reader.result; };
      reader.readAsDataURL(file);
    },
    goBack() { this.$router.push({ name: 'Contacts' }); },
    async save() {
      const id = crypto && crypto.randomUUID ? crypto.randomUUID() : String(Date.now());
      const payload = { ...this.form, id };
      const { invoke } = window.__TAURI__.core;
      await invoke('add_contact', { contact: payload });
      this.goBack();
    }
  }
}
</script>

<style scoped>
.new-contact-page { display: flex; flex-direction: column; height: 100vh; background:#fff; overflow-y: auto; }
.topbar { display:flex; align-items:center; gap:10px; padding:16px 20px; }
.back-btn { width:36px; height:36px; border:none; border-radius:50%; background:#ff6b35; color:#fff; cursor:pointer; }
.title { font-size:28px; font-weight:700; margin:0; }

.form-card { margin: 0 20px; padding: 20px; border-radius: 16px; background:#f8f9fa; }
.avatar-upload { display:flex; align-items:center; gap:16px; margin-bottom: 16px; }
.avatar-circle { width:90px; height:90px; border-radius:50%; background:#e9eef3; display:flex; align-items:center; justify-content:center; }
.avatar-text { font-weight:700; color:#5b6b7a; }
.upload-btn { color:#385a7c; cursor:pointer; }

.form-grid { display:grid; grid-template-columns: 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group label { color:#385a7c; font-weight:600; }
.input { padding:12px 14px; border:1px solid #e0e0e0; border-radius:20px; background:#fff; outline:none; }
.input:focus { border-color:#ff6b35; }

.footer-bar { position: sticky; bottom: 0; display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid #f0f0f0; background:#fff; }
.secondary { background:#e9ecef; border:none; border-radius:10px; padding:10px 14px; cursor:pointer; }
.primary { background:#ff6b35; color:#fff; border:none; border-radius:10px; padding:10px 16px; cursor:pointer; }
</style>


